/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";
import { storiesOf } from "@storybook/react";
import defaultTheme from "../Theme";
import {IconActivity, IconAirplay, IconAlertOctagon, IconLayers, IconMoreVertical, IconPackage} from "../Icons";
import { useState, useRef } from "react";
import { Pager } from "../Pager";
import * as React from "react";
import { Layer } from "../Layer";
import { Toolbar } from "../Toolbar";
import { Text } from "../Text";
import { Tabs, Tab } from "../Tabs";
import { List, ListItem } from "../List";
import { Avatar } from "../Avatar";
import { Badge } from "../Badge";
import { faker } from '@faker-js/faker/locale/zh_CN';
import { Link as RouterLink ,useLocation} from "wouter";
import {ResponsivePopover} from "../Popover";
import {MenuDivider, MenuItem, MenuList} from "../Menu";
import {IconButton} from "../IconButton";
import {useToast} from "../Toast";
import scrollIntoView from "scroll-into-view-if-needed";
import {DdMenu, DdMenuItem} from "../DropdownMenu";
import {VerticalMenu} from "../TwoHalfRightPanel";

export const ScrollViewStories = storiesOf("ScrollView", module)
  .add("替代ScrollView", () => <AutoFoucsScroll />)
  //.add("scrollTo滚到规定px", () => <AnimatedScroll />)
  .add("Tabs 不带Pager", () => <TabsExample />);



// function AnimatedScroll() {
//   const ref = useRef<ScrollViewHandles>(null);
//
//   function scroll() {
//     console.log(ref);
//     ref.current!.scrollTo(undefined, 400);
//   }
//
//   return (
//     <ScrollView css={{ height: "300px" }} overflowY  innerRef={ref}>
//       <div css={{ height: "600px" }}>
//         some scroll content
//         <button onClick={scroll}>scroll to 300</button>
//       </div>
//       <React.Fragment>
//         <button onClick={() => ref.current!.scrollTo(undefined, 0)}>
//           scroll to 0
//         </button>
//       </React.Fragment>
//     </ScrollView>
//   );
// }

function TabsExample() {
    const [tab, setTab] = useState(0);
    const [, setLocation] = useLocation();
    const toast = useToast();
    const isActive=true;

  return (
    <Layer className="List-example">
      <Toolbar className="List-toolbar">
        <Text gutter={false} variant="h6">
          My Chat App
        </Text>
      </Toolbar>

      <Tabs variant="evenly-spaced" onChange={i => setTab(i)} value={tab}>
        <Tab id={"family"}>Family</Tab>
        <Tab id="work">Work</Tab>
        <Tab id="fav">Favorites</Tab>
        <Tab id="groups">Groups</Tab>
      </Tabs>

      <div>
        <List>
          <ListItem
            contentBefore={
              <Avatar name={"Lynn Apple"} src={faker.image.avatar()} />
            }
            primary="Lynn Apple"
            wrap={false}
            secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
            contentAfter={<Badge>1</Badge>}
          />
          <ListItem
            contentBefore={
              <Avatar name={"Mary Joe"} src={faker.image.avatar()} />
            }
            primary="Mary Joe"
            wrap={false}
            secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
            contentAfter={<Badge>4</Badge>}
          />

        <ListItem
                   wrap={false}
                   contentBefore={
                       <Avatar name={"Mary Joe"} src={faker.image.avatar()} />
                   }
                   primary={
                       `报告 ${isActive||''}`
                   }
                   secondary={"后" ||''}
                   contentAfter={
                       <>
                           <VerticalMenu>
                               <DdMenuItem label="提交审核" onClick={(e) => {
                                   toast({
                                       title: "要跳转网页链接"
                                   });
                                   setLocation("/?path=/story/alert--color-variants", { replace: true } );
                               }}/>
                           </VerticalMenu>
                           <DdMenu label="删除" tight={true}
                                   icon={
                                       <MenuItem variant="ghost"  component={"div"}
                                                 onClick={() => {
                                                     // preload();
                                                     // setOpen(true)
                                                 }}
                                       >
                                           <IconLayers />
                                       </MenuItem>
                                   }
                           />
                       </>
                   }
        />

        </List>
      </div>
    </Layer>
  );
}

//利用scrollIntoView自动定位，  #抛弃ScrollView了！
function AutoFoucsScroll() {
    const ref1 = React.useRef<HTMLButtonElement>(null);
    const ref2 = React.useRef<HTMLButtonElement>(null);
    const refMain = React.useRef(null);
    function scroll1() {
            scrollIntoView(ref1.current, {
                behavior: 'smooth',
                block: 'end',
            });
    }
    function scroll2() {
        scrollIntoView(ref2.current, {
            behavior: 'smooth',
            block: 'end',
        });
    }
    //初始就跳到 某个DIV;
    React.useEffect(() => {
        scrollIntoView(refMain.current, {
            behavior: 'smooth',
            block: 'end',
        });
    }, []);

    //【注意】 内部Divheight比外Div更大的必须在外部div要加overflowY: 'auto'加上！否则可能无效。
    return (
        <div  css={{ height: "300px", overflowY: 'auto' }} >
            <div css={{ height: "500px" }}  >
                some scroll content
                <button onClick={scroll1 }   ref={ref2}> scroll to 300</button>
            </div>
            <div css={{ height: "200px" }}  >
                <button  ref={refMain}>sfasfqreewr奥术大师多</button>
            </div>
            <React.Fragment>
                <button onClick={scroll2 }   ref={ref1}>
                    scroll to 0
                </button>
            </React.Fragment>
        </div>
    );
}
